<template>
  <div class="home">
    <GeoLocation @search-error="handleSearchError"/>
    <div v-if="loading" class="loading">加载中...</div>
    <template v-else>
      <FutureWeater />
    </template>
    <div v-if="error" class="error-toast">{{ error }}</div>
  </div>
</template>

<script>
import GeoLocation from '@/components/GeoLocation.vue'
import FutureWeater from '@/components/FutureWeater.vue'
export default {
  name: 'HomeView',
  components: {
    GeoLocation,
    FutureWeater,
  },
  data() {
    return {
      loading: false,
      error: ''
    }
  },
  methods: {
    handleSearchError(message) {
      this.error = message;
      setTimeout(() => {
        this.error = '';
      }, 3000);
    }
  }
}
</script>